<template>
  <div class="app-container">
    <bind-mobile v-if="!userinfo.mobile || isUpMobile" :is-up="isUpMobile" :userinfo="userinfo" @getuserinfoTime="getuserinfo" @cancelMobile="cancelMobile" />
    <bind-wechat v-if="!userinfo.open_id" :is-up="isUp" :userinfo="userinfo" @getuserinfoTime="getuserinfo" />
    <el-card v-if="userinfo.mobile && userinfo.open_id && !isUpMobile" shadow="always" :body-style="{ padding: '20px' }">
      <el-result
        icon="success"
        title="绑定成功"
        description="您的微信已经成功绑定，无需重复操作。"
      >
        <template slot="extra">
          <el-descriptions class="text-center" title="已绑定信息" column="1">
            <el-descriptions-item label="用户名">{{ userinfo.mobile }}</el-descriptions-item>
            <el-descriptions-item label="微信openId">{{ userinfo.open_id }}</el-descriptions-item>
          </el-descriptions>
          <el-row :gutter="20">
            <el-col :span="8" :xs="24" :offset="0"> <el-button type="primary" size="medium" @click="goprofile">查看资料</el-button></el-col>
            <el-col :span="8" :xs="24" :offset="0"><el-button class="flex" type="primary" size="medium" @click="upWechat">更换微信</el-button></el-col>
            <el-col :span="8" :xs="24" :offset="0"><el-button class="flex" type="primary" size="medium" @click="upMobile">更换手机号</el-button></el-col>
          </el-row>
        </template>
      </el-result>
    </el-card>

  </div>
</template>

<script>
import bindMobile from './components/bindMobile'
import bindWechat from './components/bindWechat'
import { getUnbindQrcode, getuserinfo } from '@projectName/api/profile/profile.js'

export default {
  components: {
    bindMobile,
    bindWechat
  },
  data() {
    return {
      isUpMobile: false,
      isUp: false,
      userinfo: {
        mobile: '',
        open_id: ''
      },
      loading: false
    }
  },
  created() {
    this.getuserinfo()
  },
  methods: {
    cancelMobile() {
      this.isUpMobile = false
      this.getuserinfo()
    },
    upMobile() {
      this.isUpMobile = true
    },
    upWechat() {
      getUnbindQrcode().then(res => {
        console.log(res)
        this.$message.success('更换微信成功')
        this.isUp = false
        this.userinfo.open_id = null
      }).catch(err => {
        console.log(err)
        this.$message.error('更换微信失败')
        this.loading = false
      })
    },
    goprofile() {
      this.$store.dispatch('app/closePage', {
        vm: this,
        fromName: this.$route.name,
        toName: 'profile-index',
        params: {}
      })
    },
    getuserinfo() {
      getuserinfo().then(res => {
        console.log(res)
        this.userinfo = res.data.userinfo.user
        console.log(this.userinfo)
      }).catch(err => {
        console.log(err)
        this.$message.error('获取用户信息失败')
        this.loading = false
      })
    }
  }
}
</script>

<style>

</style>
